<template>
  <ItCrudPage title="测试3" :table="tableProps" :rowSelectionKeys="rowSelectionKeys" :rowOperation="rowOperation"
    :deleteService="deleteServiceApi" :search="searchProps" :multiDeleteService="multiDeleteHandle"
    :updateService="updateService" :headerExtraBtns="headerExtraBtns" :createService="createService"
    :editForm="editProps"
/>
</template>
<script lang="ts" setup>
import { pagePost, createPost, deletePost, Post, deleteBatchPost } from '../api';
import { ref } from 'vue'
import { SearchItem } from '@/iboot-vue/antd-component2'
import { message } from 'ant-design-vue';
const searchProps = ref<SearchItem[]>();
// createPost({
//   userId: 1,
//   title: '测试',
//   body: '测试内容'
// })
searchProps.value =
  [{
    component: 'Input',
    key: 'title',
    value: '',
    metadata: {
      placeholder: '输入标题'
    }
  }
  ] as SearchItem[];

const tableProps = {
  dataKey: 'records',
  columns: [
    {
      title: 'ID',
      dataIndex: 'id',
      width: '10%',
    },
    {
      title: '用户ID',
      dataIndex: 'userId',
      width: '10%',
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: '30%',
    },
    {
      title: '内容',
      dataIndex: 'body',
    },
  ],
  service: pagePost,
}

const rowSelectionKeys = ['id', 'userId']

const rowOperation = {
  show: true,
  extraOpts: [{
    name: '详情'
  }]
}

const deleteServiceApi = {
  api: (record: Object) => {
    return deletePost((record as Post).id)
  },
  onSuccess: (res: any) => {
    message.success('删除成功')
  }
}

const updateService = {
  api: (record: Object) => {
    return null
  }
}

const createService = {
  api: (record: Object) => {
    const data = record as Post
    data.userId = '1'
    return createPost(data)
  }
}

const headerExtraBtns = [
  {
    name: '导出所选',
    mustSelect: true,
    props: {
      type: 'primary'
    },
    onClick: (keys: string) => {
      console.log(keys)
    }
  },
  {
    name: '导入'
  }
]

const multiDeleteHandle = {
  api: (keys: string[]) => {
    return deleteBatchPost(keys.map(key => (JSON.parse(key) as Post).id))
  },
  onSuccess: (res: any) => {
    message.success('删除成功')
  }
}


const editProps = {
      name: 'sampleForm',
      metadata: {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 },
      },
      button: {
        show: true,
        formItemMetadata: {
          wrapperCol: { offset: 3, span: 21 },
        },
      },
      items: [
        {
          type: 'col',
          label: '标题',
          component: 'Input',
          key: 'title',
          value: '',
          metadata: {
            placeholder: '请输入标题'
          },
          rule: [
            {
              required: true,
              message: '请输入标题'
            }
          ]
        },
        {
          type: 'col',
          label: '内容',
          component: 'Input',
          key: 'body',
          value: '',
          metadata: {
            placeholder: '请输入内容',
          },
          rule: [
            {
              required: true,
              message: '请输入内容'
            }
          ]
        }
      ]
    }


</script>